<template>
	<div>
		<div class="publish-top">
			<div class="left-icon" @click="handleBack"> 
				<img src="../../../assets/images/left.png"/>
			</div>
			<p>点赞</p>
		</div>
		<div class="thunbs-content">
			<ul class="reply-list" v-if="isThumbsup">
				<li v-for="(item,index) in list">
					<div class="list-top">
						<div class="top-left">
							<div class="handimg" @click="handleMask(item.user_id,item.user_nickname)">
								<b v-if="item.read!=0"></b>
								<img :src="item.user_himg ? item.headimg : defalut "/>
							</div>
							<div class="name">
								<p>{{item.user_nickname}}</p>
							</div>
						</div>
						<div class="time">
							<img src="../../../assets/images/mine/time.png"/>
							<span>{{item.like_time}}</span>
						</div>
					</div>
					<div class="ask">
						<img src="../../../assets/images/mine/thumbs-up.png"/>
						<p>赞了你的帖子</p>
					</div>
					<div class="list-bottom" @click="handleDetal(item.article_id)">
						<img :src="item.article_img[0]" v-if="item.article_img !=''"/>
						<div class="con-desc"><span v-if="item.article_img ==''">主题：</span>{{item.article_title}}</div>
					</div>
				</li>
			</ul>
			<div class="list-img-pic" v-else>
				<nocontent></nocontent>
			</div>
			<!--弹框-->
			<div class="mask" v-if="isMask">
				<div class="mask-opaciy"></div>
				<div class="mask-information">
					<img :src="infoList.user_himg ? imgs : defalut" class="head-portrait"/>
					<img src="../../../assets/images/home/del.png" class="Close" @click="onClose"/>
					<h3>{{infoList.user_nickname}}</h3>
					<p>{{infoList.user_desc}}</p>
					<div class="info-follow">
						<div @click="handleFollow">
							<img src="../../../assets/images/home/follow.png"/>
							<span>{{value}}</span>
						</div>
						<img src="../../../assets/images/hx.png"/>
						<div @click="handleLetter">
							<img src="../../../assets/images/home/letter.png"/>
							<span>发私信</span>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	
	import axios from "axios";
	import user from '../../../utils/isLogin';
	import defalut from '../../../assets/default.jpg';
	import Nocontent from '@/components/home/no-content';
	import qs from 'qs';
	export default{
		data(){
			return{
				list:[],
				isMask: false,
				infoList:[],
				defalut: defalut,
				imgs:'',
				follId: 0,
				name: '',
				focus:0,
				value:'关注',
				isClick:true,
				isThumbsup:true
			}
		},
		filters: {
		  url: function (value) {
		    if (!value) return ''
		    value = user.src + value
		    return value
		  }
		},
		components:{
			Nocontent
		},
		created(){
			let plusReady = ()=>{
				
			}
			if (window.plus) {
		      plusReady();
		    } else {
		      document.addEventListener("plusready", plusReady, false);
		    }

			var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
	    	axios.post(user.src + '/index/collect/Give_me_a_thumb_up' , {
				userid: userId,
			})
			.then((res)=> {
				if(res.data.status == 1055){
					this.isThumbsup = false;
				}
				if(res.data.status == 200){
					this.list = res.data.data;
					this.list.map((ele,index)=>{
						ele.headimg = ele.user_himg;
					})
					this.isThumbsup = true;
				}
			})
			.catch((error)=> {
			   
			});
		},
		
		methods:{
			//返回
			handleBack(){
				var thumbsup = plus.webview.currentWebview();
				plus.webview.close(thumbsup);
			},
			//进入详情
			handleDetal(id){
				if(this.isClick){
					this.isClick = false;
					var postDetails = plus.webview.create('postDetails.html','postDetails',{scrollIndicator:'none'},{
						articleId:id,
						type:2
					});
					postDetails.addEventListener("loaded", ()=> {
					    postDetails.show('pop-in', 300);
					    plus.webview.getWebviewById('thumbsup').reload();
					    this.isClick = true;
					    postDetails = null;
					}, false);
				}
			},
			//打开弹窗
			handleMask(id,name){
				this.isMask = true; 
				this.follId = id;
				this.name = name;
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
				axios.post(user.src+ '/index/user/is_focus' , {
					articleUserid: id,
					userId: userId
				})
				.then( (res)=> {
					if(res.data.status == 200){
						this.infoList = res.data.data;
						this.imgs = res.data.data.user_himg;
						if(res.data.data.focus == 1){
							this.value = '已关注';
						}else{
							this.value = '关注';
						}
					}
				})
				.catch( (error)=> {
				   
				});
			},
			//关闭弹窗
			onClose(){
				this.isMask = false; 
			},
			//关注
			handleFollow(){
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
				var data = qs.stringify({
					userid:userId,
				   article_userId:this.follId
				})
				axios({
				   method: 'post',
				   url: user.src + '/index/collect/focus',
				   data:data
				})
			   .then(res => {
			      	if(res.data.status == 200){
						this.value = '已关注';
						
					}else if(res.data.status == 1030){
						this.value = '关注'
					}
			   })
			   .catch(err => {
			      console.log(err)
			   })
			},
			//发私信
			handleLetter(){
				let id = this.follId;
				let name = this.name;
				if(this.isClick){
					this.isClick = false;
					var send = plus.webview.create('send.html','send',{},{
						recipientId:id,
						name : name
					});
					send.addEventListener("loaded", ()=>{
					    send.show('pop-in', 300);
					    this.isClick = true;
					    send = null;
					}, false);
				}
			}
		}
	}
</script>

<style lang='less' scoped>

html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #f6f6f6;
	}
	*{
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
	}
	.publish-top{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 60px;
		background:@default-blue;
		box-shadow: 0px 0px 8px 1px #999;
		padding-top: 70px;
		display:flex;				
		.left-icon{
			width: 90px;
			img{
				width: 15px;
				height: 26px;
				margin-left: 31px;
			}
		}
		p{		
			width: 80%;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
		span{
			display: block;
			width: 170px;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
	}
	.thunbs-content{
		padding-top: 130px;
		width: 100%;	
		.reply-list{
			padding: 0 24px;
			li{
				padding: 32px 0 40px 0;
				.list-top{
					display: flex;
					justify-content: space-between;
					.top-left{
						display: flex;
						justify-content: space-between;
						.handimg{
							position: relative;
							width: 65px;
							height: 65px;
							border-radius: 50%;
							b{
								position: absolute;
								left:0px;
								top: 0px;
								background: red;
								width: 16px;
								height: 16px;
								border-radius: 50%;
							}
							img{
								display: block;
								width: 65px;
								height: 65px;
								border-radius: 50%;
							}
						}
						.name{
							padding: 19px 0 0 18px;
							
							p{
								font-size: 26px;
								color: #333;
							}
						}
					}
					.time{
						display: flex;
						img{
							display: block;
							width: 27px;
							height: 27px;
						}
						span{
							margin: 0 40px 0 10px;
							font-size: 22px;
							color:33px;
						}
					}
				}
				.ask{
					padding-left: 82px;
					display: flex;
					img{
						display: block;
						width: 24px;
						height: 27px;
					}
					p{
						padding-left: 20px;
						font-size: 26px;
						color: #333;
					}
				}
				.list-bottom{
					width: 600px;
					background: #eff3f6;
					margin-top: 10px;
					margin-left: 70px;
					overflow: hidden;
					border-radius: 10px;
					display: flex;
					align-items: center;
					img{
						display: block;
						float: left;
						width: 174px;
						height: 140px;
						border-radius: 10px;
					}
					.con-desc{
						max-width: 100%;
						float: left;
						padding-left:18px;
						display: block;
						height: 60px;
						line-height: 60px;
						font-size: 24px;
						color: #333;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
		.mask{
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			.mask-opaciy{
				width: 100%;
				height: 100%;
				background: #000000;
				opacity: .5;
			}
			.mask-information{
				position: absolute;
				top: 30%;
				left: 60px;
				width: 598px;
				height: 467px;
				border: 1px solid #d4ccca;
				background: #FFFFFF;
				border-radius: 10px;
				.head-portrait{
					position: absolute;
					left: 212px;
					top: -70px;
					width: 160px;
					height: 160px;
					border: 2px solid #FFFFFF;
					border-radius: 50%;
				}
				.Close{
					position: absolute;
					right: 0;
					top: -80px;
					width:76px;
					height: 76px;
				}
				h3{
					margin-top: 123px;
					text-align: center;
					font-size: 38px;
				}
				p{
					height: 147px;
					margin-top: 10px;
					padding: 0 80px;
					font-size: 26px;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
				}
				.info-follow{
					height: 128px;
					border-top: 1px solid #cecece;
					display: flex;
					align-items: center;	
					justify-content: space-between;			
					padding-left: 90px;
					padding-right: 75px;
					div{
						display: flex;
						align-items: center;
						img{
							width: 48px;
							height: 46px;
							margin-right: 10px;
						}
						span{
							font-size: 28px;
						}
					}
					img{
						width: 1px;
						height: 43px;
					}
				}
			}
		}
	}
	.list-img-pic{
		height: 800px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>